<template>
	<detailbox title="升版" @leftclick="close">
		<div slot="right" class="flex_end">
			<el-button type="primary" size="small" @click="openDialg('confirm')">预览并提交</el-button>
		</div>
		<el-row class="mt10">
			<el-col :span="18">
				<basic-container>
					<div class="main_title success_f">
						<b>填写文件信息</b>
					</div>
					<el-divider></el-divider>
					<div>
						<div class="mb20">
							<span class="index_num success_bg">1</span>
							<b class="f14">文件属性</b>
							<el-popover placement="top-start" title="" width="200" trigger="hover">
								<div>文件属性的数据与上传的文件封面的数据相同</div>
								<i slot="reference" class="el-icon-question f18 gray_f ml10"></i>
							</el-popover>
						</div>
						<table class="table1 owntable mb20 " border="0" cellspacing="0" cellpadding="1"
							style="width: 100%;">
							<tr>
								<td>文件名称</td>
								<td>{{detail.name}}</td>
								<td>文件类型</td>
								<td>{{detail.fileType=='0'?'医疗器械':'体系运行'}}</td>
								<td>文件编号</td>
								<td>{{detail.fileNumber}}</td>
							</tr>
							<tr>
								<td>文件版本号</td>
								<td>{{detail.versionNumber}}</td>
								<td>文件控制状态</td>
								<td>{{detail.controlStatus=='0'?'受控':'非受控'}}</td>
								<td>内部/外来文件</td>
								<td>{{detail.fileSource=='0'?'内部文件':'外来文件'}}</td>
							</tr>
							<tr>
								<td>页码数量</td>
								<td>{{detail.fileNumber}}</td>
								<td>编制部门</td>
								<td colspan="4">{{detail.createDeptName}}</td>
							</tr>
						</table>
						<el-row>
							<el-form size="small">
								<el-form-item label="文件版本号：" required>
									<el-radio-group v-model="radio">
										<el-radio :label="6">使用自定义版本号</el-radio>
									</el-radio-group>
									<el-input class="ml10" placeholder="输入编号" style="width: 120px;"></el-input>
									<span class="gray_f f12 ml10">上一版本的文件版本号：{{detail.versionNumber}}</span>
								</el-form-item>
								<el-form-item label="升版原因：" required>
									<el-autocomplete style="width: 400px;" class="inline-input" v-model="state1"
										:fetch-suggestions="querySearch" placeholder="请输入内容" @select="handleSelect">
									</el-autocomplete>
								</el-form-item>
							</el-form>
						</el-row>
					</div>
					<div>
						<div class="mb20">
							<span class="index_num success_bg">2</span>
							<b class="f14">上传的文件</b>
							<i class="red_f">*</i>
						</div>
						<div class="flex_start" v-if="detail.isSystemCover==1">
							<div class="flex_start ml10 disabled">
								<el-button disabled size="small" v-if="isSystemCover"
									@click="openDialg('template')">
									<el-checkbox v-model="isSystemCover" disabled><span
											class="f14 gray_f">使用系统生成的封面</span>
									</el-checkbox>
								</el-button>
								<!-- 	<div class="btnleft">
									<el-checkbox v-model="isSystemCover" disabled><span
											class="f14 gray_f">使用系统生成的封面</span>
									</el-checkbox>
								</div> -->
							</div>
							<i slot="reference" class="el-icon-question f18 gray_f ml10"></i>
							<div class="gray_f f12">上一版本使用了系统生成的封面，新版封面的相关数据系统会相应升版更新</div>
						</div>

						<div class="flex_start" v-else>
							<!-- <el-button type="primary" plain size="small" @click="attachBox=true">上传本地文件</el-button> -->
							<el-button type="primary" plain size="small" v-if="isSystemCover"
								@click="openDialg('template')">使用系统模板</el-button>

							<!-- <span class="gray_f f12 ml10">仅限上传word/excel格式文件</span> -->
							<div class="flex_start ml10 main_co btnbox" v-if="isSystemCover">
								<div class="btnleft">
									<el-checkbox v-model="isSystemCover"><span class="f14 main_co">使用系统生成的封面</span>
									</el-checkbox>
								</div>
								<div class="f14 btnright pointer">封面预览</div>
							</div>
							<el-checkbox class="ml10" v-else v-model="isSystemCover" label="使用系统生成的封面" border
								style="padding: ;"></el-checkbox>
							<div class="f12 error_f flex_start ml10" v-if="isSystemCover"><i
									class="el-icon-warning-outline error_f f14"></i>
								请删除文件自带的封面</div>



							<!-- 						<el-button type="primary" v-if="isSystemCover" plain size="small"
								@click="openDialg('template')">使用系统模板</el-button>
							<div class="flex_start ml10 main_co btnbox active">
								<div class="btnleft">
									<el-checkbox v-model="isSystemCover"><span class="f14 main_co">使用系统生成的封面</span>
									</el-checkbox>
								</div>
								<div class="f14 btnright pointer">封面预览</div>
							</div>
							<div class="f12 error_f flex_start ml10"><i class="el-icon-warning-outline error_f f14"></i>
								请删除文件自带的封面</div> -->
						</div>
						<div class="flex_between" style="align-items: flex-start;">
							<el-table :data="tableData" border style="margin-top: 20px;"
								header-cell-class-name="gray_bg">
								<el-table-column label=" 文件-上一个版本使用系统模版">
									<template slot-scope="scope">
										<div class="flex_between">
											<div class="main_co">质量手册.doc</div>
											<div class="flex_between">
												<span class="ml10">2021-09-27 15:29 编辑</span>
												<el-button plain size="mini" class="ml10">封面预览</el-button>
											</div>
										</div>
									</template>
								</el-table-column>
							</el-table>
							<div class="preview">
								<div class="flex_between mb10">
									<div class="f14"><b>质量手册示例</b></div>
									<el-button @click="showpreview=true" size="mini" class="iconfont icon-quanping"
										style="padding: 4px;"></el-button>
								</div>
								<div class="f12">请按照示例的文件编辑您的文档，示例为行业专家制定的通用格式</div>
								<div class="warn_f f12"><i slot="reference"
										class="el-icon-warning-outline f14"></i>示例红色处为必须编制添加的内容项</div>
								<div class="white_bg tem"></div>
							</div>
						</div>

					</div>

				</basic-container>
			</el-col>
			<el-col :span="6">
				<basic-container>
					<div class="main_title warn_f">
						<b>流程信息</b>
					</div>
					<el-divider></el-divider>
					<div class="mb20">
						<div class="mb20"><span class="index_num warn_bg">1</span><b>工作流</b></div>
						<div class="mb20 flex_around pub_center deepgray_f steps">
							<div class="flex_center" style="align-items: baseline;">
								<div class="f20"><b>①</b></div>
								<div class="f16">编制</div>
							</div>
							<i class="el-icon-arrow-right f24 gray_f"></i>
							<div class="flex_center" style="align-items: baseline;">
								<div class="f20"><b>②</b></div>
								<div class="f16">复审</div>
							</div>
							<i class="el-icon-arrow-right f20 gray_f"></i>
							<div class="flex_center" style="align-items: baseline;">
								<div class="f20"><b>③</b></div>
								<div class="f16">批准</div>
							</div>
						</div>
						<div class="flex_start mb20">
							<el-checkbox class="" v-model="isOnlineReview" label="启用线上评审" border></el-checkbox>
							<div class="f12 gray_f">
								按照人员排列序号，决定评审签名顺序，
								一人评审签名完才轮到下一位
							</div>

						</div>
						<div class="tabledata gray_bg" v-if="isOnlineReview">
							<el-table :data="tableData" v-if="tableData.length" header-cell-class-name="gray_bg"
								row-class-name="gray_bg" style="width: 100%;margin-top: 20px;">
								<el-table-column type="index" label="评审排序">
								</el-table-column>
								<el-table-column label="评审部门" prop="deptName">
								</el-table-column>
								<el-table-column label="评审人员" prop="userName">
								</el-table-column>
								<el-table-column label="编辑">
									<template slot-scope="scope">
										<i class="pointer main_co el-icon-edit f16"
											@click="addUser(scope.row,scope.$index)"></i>
										<i class="error_f pointer el-icon-delete f16 ml30"
											@click="delUser(scope.$index)"></i>
									</template>
								</el-table-column>

							</el-table>
							<div class="main_co flex_start addbtn pointer" @click="addUser()">
								<i class="el-icon-circle-plus-outline f20"></i>
								<span class="ml10">增加评审人员</span>
							</div>
						</div>
					</div>
					<div>
						<div class="mb20">
							<span class="index_num warn_bg">2</span>
							<b>签名人员</b>
							<el-popover placement="top-start" width="300" trigger="hover">
								<div class="f12 deepgray_f">如果签名人员部门或名字不对，请联系系统超级管理员</div>
								<i slot="reference" class="el-icon-question f18 gray_f ml10"></i>
							</el-popover>
						</div>
						<div class="f14">
							<div class="flex_start mb20">
								<div>编制人：</div>
								<div class="border deepgray_f ml10 flex_item">{{userInfo.user_name}}</div>
							</div>
							<div class="flex_start mb20">
								<div>复审人：</div>
								<el-select placeholder="请选择" v-model="shenhe.userId" ref="shenheuser" filterable>
									<el-option v-for="(item,i) in Alluser" :key="i" :value="item.value"
										:label="item.label">
									</el-option>
								</el-select>
							</div>
							<div class="flex_start mb20">
								<div>批准人：</div>
								<el-select placeholder="请选择" v-model="pizhun.userId" ref="pizhunuser" filterable>
									<el-option v-for="(item,i) in Alluser" :key="i" :value="item.value"
										:label="item.label">
									</el-option>
								</el-select>
							</div>
						</div>
					</div>
				</basic-container>
			</el-col>
		</el-row>
		<el-drawer title="质量手册示例" modal-append-to-body :visible.sync="showpreview" direction="rtl">
			<div class="preview bigpreview">
				<div class="f12">请按照示例的文件编辑您的文档，示例为行业专家制定的通用格式</div>
				<div class="warn_f f12"><i slot="reference" class="el-icon-warning-outline f14"></i>示例红色处为必须编制添加的内容项
				</div>
				<div class="white_bg tem"></div>
			</div>
		</el-drawer>
		<chooseTemplate ref="template"></chooseTemplate>
		<steps ref="steps" @close="success()" :nowdate="nowdate"></steps>
		<confirm ref="confirm" @close="save()" type="2" :guifanFilesProcessRecordList="guifanFilesProcessRecordList"
			:systemGuifanFilesProcessList="systemGuifanFilesProcessList"></confirm>
		<showhistory ref="showhistory" type="2"></showhistory>
		<el-dialog title="附件管理" append-to-body :visible.sync="attachBox" width="555px">
			<avue-form ref="form" :option="attachOption" v-model="attachForm" :upload-after="uploadAfter">
			</avue-form>
		</el-dialog>
		<el-dialog title="添加/编辑评审人员" append-to-body :visible.sync="showaddUser" width="555px">
			<el-form size="small">
				<el-form-item label="评审部门">
					<el-cascader placeholder="请选择" ref="newdept" :options="deptOption" v-model="newMember.deptId"
						:show-all-levels="false" :props="{
							 value:'id',
							 label:'deptName',
							 emitPath: false
						 }" filterable @change="getMemberOption"></el-cascader>
				</el-form-item>
				<el-form-item label="评审人员">
					<el-select placeholder="请选择" v-model="newMember.userId" filterable>
						<el-option v-for="(item,i) in memberOption" :key="i" :value="item.id" :label="item.name">
						</el-option>
					</el-select>
				</el-form-item>
			</el-form>
			<div slot="footer">
				<el-button size="small" type="primary" @click="addMember()">确定</el-button>
			</div>
		</el-dialog>
	</detailbox>
</template>

<script>
	import confirm from "./confirm.vue"
	import {
		getAlluser,
		getdeptlist,
		getuserByDept
	} from "@/api/myapi/common";
	import {
		savefiles,
		getguifanDetail
	} from "@/api/myapi/tixiwenjian";
	export default {
		props: {
			detailId: ''
		},
		components: {
			confirm
		},
		data() {
			return {
				radio: '',
				nowdate: '',
				checked: false,
				attachBox: false,
				showaddUser: false,
				showpreview: false,
				isSystemCover: false,
				tableData: [],
				useTemp: false,
				attachForm: {},
				formList: [{
					name: '',
					controlStatus: 0,
					fileType: 0,
					depts: [],
					versionNumber: '',
					fileNumber: '',
					fileSource: 0,
					versionNumberType: 0,
					fileNumberType: 0,
					isSystemCover: false
				}, ],
				newMember: {
					deptId: '',
					deptName: '',
					userId: '',
					userName: ''
				},
				pizhun: {
					deptId: '',
					deptName: '',
					userId: '',
					userName: ''
				}, //批准
				shenhe: {
					deptId: '',
					deptName: '',
					userId: '',
					userName: ''
				}, //审核
				guifanFilesProcessRecordList: [],
				systemGuifanFilesProcessList: [],
				deptOption: [],
				Alluser: [],
				memberOption: [],
				memberOption: [],
				isOnlineReview: false,
				attachOption: {
					submitBtn: false,
					emptyBtn: false,
					column: [{
						label: '附件上传',
						prop: 'attachFile',
						type: 'upload',
						drag: true,
						loadText: '文件上传中，请稍等',
						span: 24,
						propsHttp: {
							res: 'data'
						},
						action: "/api/blade-resource/oss/endpoint/put-file-attach"
					}]
				},
				detail: {}
			}
		},
		mounted() {
			if (this.detailId) {
				this.getDetail()
			}
			this.getdeptlist()
			this.getAlluser()
			console.log(this.userInfo)
		},
		methods: {
			close() {
				this.$emit('close')
			},
			getDetail() {
				getguifanDetail({
					id: this.detailId
				}).then(({
					data
				}) => {
					if (data.success) {
						this.detail = data.data
						this.detail.isSystemCover == 1 ? this.isSystemCover = true : ''
					}
				})
			},
			// 添加文件
			addForm() {
				this.formList.push({
					name: '',
					controlStatus: 0,
					fileType: 0,
					depts: [],
					versionNumber: '',
					fileNumber: '',
					fileSource: 0,
					versionNumberType: 0,
					fileNumberType: 0,
				})
			},
			delForm(i) {
				this.formList.splice(i, 1)
			},
			// 添加评审
			addUser(item, index) {
				console.log(item)
				console.log(index)
				if (item) {
					this.newMember = {
						...item,
						index: index
					}
				} else {
					this.newMember = {
						deptId: '',
						deptName: '',
						userId: '',
						userName: ''
					}
				}
				this.showaddUser = true
			},
			delUser(index) {
				console.log(index)
				this.tableData.splice(index, 1)
			},
			// 部门列表
			getdeptlist() {
				this.deptOption = this.$store.state.common.deptOption
				return
				getdeptlist({}).then(({
					data
				}) => {
					if (data && data.success) {
						this.deptOption = data.data
					}
				})
			},
			// 部门列表
			getAlluser() {
				getAlluser({
					current: 1,
					size: 100000
				}).then(({
					data
				}) => {
					if (data && data.success) {
						data.data.records.forEach(item => {
							this.Alluser.push({
								label: `(${item.deptName})${item.name}`,
								value: item.id,
								deptId: item.deptId

							})
						})
					}
				})
			},
			getMemberOption(e) {
				let dept = this.$refs.newdept.getCheckedNodes()
				this.newMember.deptName = dept[0].label
				this.newMember.deptId = dept[0].value
				this.newMember.userId = ''
				this.newMember.userName = ''
				console.log(dept[0])
				getuserByDept({
					deptId: dept[0].value
				}).then(({
					data
				}) => {
					if (data && data.success) {
						this.memberOption = data.data
					}
				})
			},
			// 添加评审
			addMember() {
				if (!this.newMember.deptId) {
					this.$message.error('请选择评审部门')
					return
				}
				if (!this.newMember.userId) {
					this.$message.error('请选择评审人员')
					return
				}
				let user = this.memberOption.find(item => item.id == this.newMember.userId)
				console.log(user)
				 this.newMember.userName = user.name;
				if (this.newMember.index || this.newMember.index === 0) {
					this.tableData[this.newMember.index] = {
						...this.newMember
					}
				} else {
					this.tableData.push({
						...this.newMember
					})
				}
				this.showaddUser = false
			},
			// 提交
			submit() {
				let systemGuifanFilesProcessList = []
				let guifanFilesProcessRecordList = []
				guifanFilesProcessRecordList.push({
					userId: this.userInfo.user_id,
					userName: this.userInfo.user_name,
					type: 0,
				})
				if (!this.shenhe.userId) {
					this.$message.error('请选择审核人员')
					return
				}
				let shenhe = this.Alluser.find(item => item.value == this.shenhe.userId)
				let pizhun = this.Alluser.find(item => item.value == this.pizhun.userId)
				guifanFilesProcessRecordList.push({
					userId: this.shenhe.userId,
					type: 1,
					userName: shenhe.label,
				})
				if (!this.pizhun.userId) {
					this.$message.error('请选择批准人员')
					return
				}
				if (this.isOnlineReview) {
					this.tableData.forEach(item => {
						guifanFilesProcessRecordList.push({
							userId: item.userId,
							userName: item.userName,
							type: 2,
						})
					})

				}
				guifanFilesProcessRecordList.push({
					userId: this.pizhun.userId,
					type: 4,
					userName: pizhun.label,
				})
				if (!this.formList.length) {
					this.$message.error('请添加文件')
					return
				}
				for (let i = 0; i < this.formList.length; i++) {
					let item = this.formList[i]
					let arr = [{
							value: item.name,
							tips: '请补充文件名称'
						},
						{
							value: item.fileType == 0 || item.depts.length > 0,
							tips: '请选择职能部门'
						},
						{
							value: item.fileNumber,
							tips: '请输入文件编号'
						},
						{
							value: item.versionNumber,
							tips: '请输入文件版本号'
						},
					]
					for (let j = 0; j < arr.length; j++) {
						if (!arr[j].value) {
							this.$message.error(arr[j].tips)
							return
						}
					}
					systemGuifanFilesProcessList.push({
						...item,
						depts: item.depts.join(','),
						guifanFilesProcessRecordList: guifanFilesProcessRecordList,
						isUpgrade: 0,
						isOnlineReview: this.isOnlineReview ? 1 : 0,
						isSystemCover: item.isSystemCover ? 1 : 0,
						templateFile: '',
						templateCover: '',

					})
				}
				this.systemGuifanFilesProcessList = systemGuifanFilesProcessList
				this.guifanFilesProcessRecordList = guifanFilesProcessRecordList
				this.openDialg('confirm')
			},
			// 保存
			save() {
				savefiles(this.systemGuifanFilesProcessList).then(({
					data
				}) => {
					if (data.success) {
						this.$message.success('提交成功')
						this.nowdate = this.dateFormat(new Date())
						this.openDialg('steps')
					}
				})
			},
			success() {
				this.$emit('success')
			},
			uploadAfter(res, done, loading, column) {
				window.console.log(res);
				window.console.log(column);
				this.attachBox = false;
				done();
			},
		}
	}
</script>

<style scoped="scoped" lang="scss">
	.btnbox {
		border: 1px solid #A3CFFD;
		opacity: 1;
		border-radius: 3px 0px 0px 3px;
	}

	.btnleft {
		padding: 0 10px;
	}

	.btnright {
		border-left: 1px solid #A3CFFD;
		padding: 0 10px;
		line-height: 32px;
	}

	.border {
		border: 1px solid #dcdfe6;
		border-radius: 4px;
		line-height: 32px;
		padding: 0 10px;
	}

	.preview {
		padding: 10px;
		background-color: #F0F2F5;
		margin-top: 20px;
		margin-left: 10px;
	}

	.preview .warn_f {
		background-color: #FBF4E0;
		border: 1px solid #F3DEA4;
		line-height: 20px;
		padding: 0 4px;
		margin: 20px 0 10px;
	}

	.preview .tem {
		width: 377px;
		height: 512px;
	}

	.preview.bigpreview {
		background-color: #FFFFFF;
	}

	.preview.bigpreview .tem {
		width: 510px;
		height: 693px;
	}

	.error {
		background-color: #FCEEEC;
		border: 1px solid #F9DCD9;
		padding: 6px 10px;
		border-radius: 2px;
	}

	/deep/ .el-checkbox.is-bordered {
		height: 32px;
		padding: 5px 10px;
	}

	.tabledata {
		padding: 0 10px 10px;

		.addbtn {
			padding-top: 10px;
		}
	}
</style>
